<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>教师主页</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/utils.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style>
			.popup-container{
				display: none;
				width: 80%;
				height: 330px;
				z-index: 999;
				position: absolute;
				top: 14%;
				left: 10%;
				background-color: white;
			}
			
			.popCon{
				z-index: 2000;
			}
			
			.pophr{
				height: 1px; 
				width: 100%; 
				background-color: #789FA8; 
				margin-top: 4px; 
			}
		</style>
	</head> 
	<body style="background-color: white;">
		<div class="mui-content" style="background-color: white;">
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2017-01-16
            	描述：导航
            -->
            <div id="nav-top" class="nav-top">
            	<div style="color: #909090; width: 45%; margin-top: 15px; margin-left: 10px; display: flex;">
            		<span id="classname" style="">三年级二班</span>
            		<span style="display: block;"><img src="img/xiayige_03.png" style="width: 12px; margin-left: 2px; margin-top: 4px;"/></span>
            	</div>
            	
            	<div style="color: #00A8C6; width: 47%; margin-top: 15px; text-align: left; margin-left: 40px;">
            		<span>只争朝夕</span>
            	</div>
            	<div class="" style="width: 8%; margin-top: 15px; margin-right: 10px;">
            		<span id="navTitleEnter">
            			<img src="img/bi_03.png" style="width: 18px;" />
            		</span>
            	</div>
            </div>
            
            <div id="cen-seating-table" style="display: flex;">
            	<div id="tab-left" style="margin-left: 8px; margin-top: 12px;">
            		<table id="seating-row-num" class="seating-row-num"></table>
            	</div>
            	<div id="tab-right" style="margin-left: 2px;">
            		<table id="seatingtable" cellspacing="2" class="seating-table"></table>
					<table id="seating-column-num" class="seating-column-num"></table>
            	</div>
            </div>
            
            <div id="liuyan" class="liuyan">
            	
            </div>
            
		</div>
		
		<div style="text-align: center;">
			<div class="foot-nav">
			 	<span id="spcalendar" style="display: block; float: left; margin-left: 30%; margin-top: 4px;">
			 		<span style="display: block;">教学</span>
			 		<span style="display: block;">日历</span>
			 	</span>
			 	<span id="classContacts" style="display: block; float: right; margin-right: 29%; margin-top: 4px;">
			 		<span style="display: block;">班级</span>
			 		<span style="display: block;">通讯</span>
			 	</span>
			</div>
		</div>
		
		<!--
        	作者：xuzhao_deng@sina.com
        	时间：2017-02-09
        	描述：弹出层 -- 输入横标
        -->
        <div id="popupNavCon" class="popupNavCon">
        	<div class="ziNavCon">
        		<span></span>
        	</div>
        </div>
		
		<!--
        	作者：xuzhao_deng@sina.com
        	时间：2017-02-09
        	描述：弹出层容器 -- 学生信息
        -->
		<div id="popupContainer" class="popup-container">
			<div id="popCon" class="popCon">
				<div id="closePop" style="float: right; margin-right: 12px; margin-top: 8px;">
					<img src="img/shanchu_03.png" style="width: 32px;" />
				</div>
				<div style="margin-left: 15px; display: flex; margin-top: 12px;">
					<span style="display: block;">
						<img src="img/touxiang_03.png" style="width: 48px;" />
					</span>
					<span style="display: block; margin-left: 10px;">
						<span style="display: flex; color: #616161; font-size: 16px;">
							<span style="display: block;">苏小白</span>
							<span style="display: block; margin-left: 20px;">男</span>
							<span style="display: block; margin-left: 30px;">8岁</span>
						</span>
						
						<span style="display: flex; color: #909090; font-size: 14px; padding-top: 6px;">
							<span style="display: block;">No.345-11</span>
							<span style="display: block; margin-left: 26px;">5组5排</span>
						</span>
					</span>
				</div>
				<div style="margin-left: 66px; margin-right: 30px; color: #789FA8; font-size: 18px; margin-top: 29px;">
					<div style="display: flex;">
						<span id="stuInfo" style="display: block;">
							<span>学生概况</span>
							<hr class="pophr" />
						</span>
						<span style="display: block; margin-left: 29px;">
							<span>关注点</span>
							<hr class="pophr" />
						</span>
					</div>
					
					<div style="display: flex; margin-top: 20px;">
						<span style="display: block;">
							<span>私信家长</span>
							<hr class="pophr" />
						</span>
						<span style="display: block; margin-left: 29px;">
							<span>成绩单</span>
							<hr class="pophr" />
						</span>
					</div>
					
					<div style="display: flex; margin-top: 20px;">
						<span style="display: block;">
							<span>电话家长</span>
							<hr class="pophr" />
						</span>
					</div>
					
					<div style="display: flex; margin-top: 20px;">
						<span style="display: block;">
							<span>评测报告</span>
							<hr class="pophr" />
						</span>
					</div>
				</div>
				<div style="float: right; margin-right: 24px; margin-top: 20px;">
					<img src="img/gengduo_03.png" style="width: 36px;" />
				</div>
			</div>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	<script>
		window.onload = function(){
			createSeatingTableHtml();
			createSeatingColumnNum(7);
			createSeatingRowNum(6);
		}
		
		function createSeatingTableHtml(){
			var $row; //行
			var $column; //列

			
			//var $trth = document.createElement("tr");
			//$trth.innerHTML = calendarTableThHtml();
			//document.getElementById("seatingtable").appendChild($trth);
			
			for($row = 0; $row < 7; $row += 1){ //循环表格行
				var $tr = document.createElement("tr");
				for($column = 0; $column < 6; $column ++){ //循环表格列
					var $td = document.createElement("td"); //创建td
					var $idx = 7 * $row + $column; //为每个表格创建索引,从0开始
					$td.innerHTML = '<td data="'+ $idx +'"><span data="'+ $idx +'" class="tabname">苏小白</span></td>'
					$tr.appendChild($td); 
				}
				document.getElementById("seatingtable").appendChild($tr);
			}
		}
		
		/**
		 * 显示列数
		 * @param {Object} $col
		 */
		function createSeatingColumnNum($col){
			for (var i = $col; i >= 1; i --) {
				var $colTr = document.createElement("tr");
				var $colTd = document.createElement("td");
				$colTd.innerHTML = i;
				$colTr.appendChild($colTd);
				document.getElementById("seating-row-num").appendChild($colTr);
			}
		}
		
		/**
		 * 显示行数
		 * @param {Object} $row
		 */
		function createSeatingRowNum($row){
			var $rowTr = document.createElement("tr");
			for (var i = 1; i <= $row; i ++) {
				var $rowTd = document.createElement("td");
				$rowTd.innerHTML = i;
				$rowTr.appendChild($rowTd);
			}
			document.getElementById("seating-column-num").appendChild($rowTr);
		}
		
		//输入班级横标
		document.getElementById("navTitleEnter").addEventListener("tap", function(e){
			e.detail.gesture.preventDefault();
			var btnArray = ['取消', '确定'];
			mui.prompt("请输入横标", "只争朝夕", "345", btnArray, function(e){
				
			});
		});
		
		//查看学员信息
		mui("#seatingtable").on("tap", ".tabname", function(){
			var $stuId = this.getAttribute("data"); //学员信息
			document.getElementById("popupContainer").style.display = "block";
		});
		
		//关闭学员信息弹出层
		document.getElementById("closePop").addEventListener("tap", function(){
			document.getElementById("popupContainer").style.display = "none";
		});
		
		//教学日历
		document.getElementById("spcalendar").addEventListener("tap", function(){
			mui.openWindow({
				url : "teachcale.html"
			});
		});
		
		//班级通讯
		document.getElementById("classContacts").addEventListener("tap", function(){
			mui.openWindow({
				url : "classcontacts.html"
			});
		});
		
		//打开学员信息页面
		mui("#popupContainer").on("tap", "#stuInfo", function(){
			mui.openWindow({
				url : "stuinfo.html"
			});
		});
	
	</script>
</html>
